<template>
  <div class="box">
    <div class="container">
      <div class="main">
        <div class="rank">
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;众所周知，《绝地求生》对于运行游戏的电脑硬件配置有一定的要求，为了更优质、流畅的游戏体验，不少玩家选择走进网吧，所以本次我们特意为QQ网吧提供了免费的硬件检测服务。
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;对于硬件符合游戏配置要求、通过认证的QQ网吧，我们将在网吧查询入口和官方展示平台向用户进行推荐；同时，通过硬件认证的网吧，有机会获得官方网吧运营奖励和资源倾斜。
          </p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;希望可以与合作伙伴一起，共同为用户创造公平、流畅、优质的游戏环境。</p>
        </div>
      </div>
      <div class="section">
        <table class="table-content">
          <colgroup>
            <col>
            <col>
            <col>
            <col>
            <col>
          </colgroup>
          <thead>
            <tr class="table-dark">
              <th></th>
              <th></th>
              <th class="netbar">高级官方认证网咖</th>
              <th class="netbar">官方认证网咖</th>
            </tr>
          </thead>
          <tbody>
            <tr class="table-light">
              <td rowspan=2 class="table-first">
                <div class="title-block">认证标准</div>
              </td>
              <td>
                <div class="title-desc">机器标准</div>
              </td>
              <td>
                <div class="table-content-text">处理器：i5-7600k/R5-1500X 及以上<br>内存：16G及以上<br>显卡：GTX-1060/RX 570 及以上</div>
              </td>
              <td>
                <div class="table-content-text">处理器：i5-4460/Opteron 4284 及以上<br>内存：16G及以上<br>显卡：GTX-960/R9 280 及以上</div>
              </td>
            </tr>
            <tr class="table-light">
              <td>
                <div class="title-desc">达标机器台数</div>
              </td>
              <td colspan=2>20台及以上</td>
            </tr>
            <tr>
              <td rowspan=8 class="table-first border-none">
                <div class="title-block">专属内容</div>
              </td>
              <td>
                <div class="title-desc">官方网吧包装</div>
              </td>
              <td colspan=2>仅在认证网吧中选择，进行优先倾斜</td>
            </tr>
            <tr>
              <td>
                <div class="title-desc">营销奖励</div>
              </td>
              <td colspan=2>仅在认证网吧中选择，进行优先倾斜</td>
            </tr>

            <tr>
              <td rowspan=2>
                <div class="title-desc">绝地求生社区App</div>
              </td>
              <td>优先推荐</td>
              <td>推荐</td>

            </tr>
            <tr>
              <td colspan=2>开启网吧专属圈子，线上运营你的客户<a
                  href="https://docs.qq.com/doc/BqI21X2yZIht1lLaNl08t9cB17oKRK1kk08c0adQDc0oQqDR1?opendocxfrom=admin"
                  target="_blank" style="color: #d6a245; text-decoration: underline;">(查看指引文档)</a></td>
            </tr>
            <tr>
              <td class="border-none">
                <div class="title-desc">其他</div>
              </td>
              <td colspan=2 class="border-none">更多专属福利即将来袭</td>
            </tr>
          </tbody>
        </table>
        <div class="rank-title"></div>
        <div class="guide">
        <div class="sub-setction">
          <h5>登录网关-部署硬件检测工具</h5>
          <p>登录QQ网吧网关，部署QQ网吧客户端，并设置相应进程开机启动，即可进行硬件检测，<a style="color: #e39600; text-decoration: underline;">下载网关</a></p>
          <img src="https://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/1st.png" />
        </div>
        <div class="sub-setction">
          <h5>查看硬件检测情况</h5>
          <p>登录网关—>应用中心—>网吧认证，查看硬件检测结果和授权情况</p>
          <img src="https://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/2nd.png" />
        </div>
        <div class="sub-setction1">
          <h5>检测完成</h5>
          <p>完成硬件检测且达标的机器台数≥20台，后续官方线上资源及线下活动资格将优先倾斜</p>
          <div class="btn">在线咨询客服</div>
        </div>
        <div class="sectionbtn">
        <div class="btn1">绝地求生认证网吧排名</div>
        <div class="btn2">网吧用户专属预约通道</div>
        </div>
        <div class="rules">
          <h1>认证说明</h1>
          <div class="rules-list">
            <p><span>1</span>本活动为QQ网吧<a>免费提供硬件检测服务</a>,如您的网吧不在QQ网吧体系内,请先注册成为<a>QQ网吧</a>;</p>
            <p><span>2</span>检测前需先在QQ网关内，部署“硬件检测工具”，才能正常启用硬件检测功能；</p>
            <p><span>3</span>官方将以硬件检测结果为依据，后续运营推广资源将在认证网吧中选择，进行优先投放；</p>
            <p><span>4</span>非认证网吧将无法享受相关福利，为保证您的权益，请勿卸载检测工具，以免信息失效；</p>
            <p><span>5</span>本活动最终解释权归腾讯所有。</p>
          </div>
        </div>
        </div>
      </div>
    </div>
    <div class="gfooter">
      <div class="gfooter-left">
        <img class="leftone" src="https://game.gtimg.cn/images/js/2018foot/logo/foot-dark.png" >
        <img class="lefttwo" src="../assets/img/nav_spr.png" />
      </div>
      <div class="gfooter-right">
        <ul>
          <li><a>腾讯互动娱乐</a><span>|</span><a> 服务条款 </a><span>|</span><a>隐私保护指引</a>  
          <span>|</span><a> 儿童保护指引</a> <span>|</span> <a>腾讯游戏招聘 </a>
          <span>|</span><a> 腾讯游戏客服</a> <span>|</span><a>游戏列表 </a> <span>|</span><a>广告服务及商务合作</a> </li>
          <li><a>腾讯公司版权所有</a></li>
          <li><a>CORPYRIGHT</a><a> © 1998 - 2021 TENCENT. ALL RIGHTS RESERVED.</a></li>
          <li><a>©PUBG Corporation. All rights reserved.</a></li>
          <li>
            <img src="https://game.gtimg.cn/images/js/2018foot/logo/gswj.png" />
          <a>工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号</a>
          </li>
        </ul>
      </div>
      <BackTop :height="100" :bottom="200">
              <div class="return"></div>
          </BackTop>
  </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped" lang="scss">
  html,
  body {
    width: 100%;
    height: 5067px;
    margin: 0;
    padding: 0;
  }
  .box {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/new/desc.jpg) no-repeat;
    .container {
      width: 1359px;
      height: 5205px;
      background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/new/inner-desc.jpg) center top 0px no-repeat;
      overflow-y: auto;
      margin-left: 480px;
      position: relative;
      .main {
        width: 1000px;
        height: 418px;
        position: absolute;
        // border: 1px solid red;
        margin-top: 1050px;
        margin-left: 100px;
        text-align: center;
        background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/title-0.png) center top no-repeat;
        overflow: hidden;
        .rank {
          width: 1000px;
          height: 293px;
          background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/desc.png) no-repeat;
          margin-top: 100px;
          position: relative;

          p {
            width: 893px;
            height: 64px;
            font-size: 16px;
            color: #c8c8c8;
            margin: 20px 0px 20px 0px;
            text-align: start;

            &:nth-child(1) {
              position: absolute;
              margin-top: 50px;
              margin-left: 50px;
            }

            &:nth-child(2) {
              position: absolute;
              margin-top: 120px;
              margin-left: 50px;
            }

            &:nth-child(3) {
              position: absolute;
              margin-top: 190px;
              margin-left: 50px;
            }
          }
        }
      }
      .section {
        width: 1000px;
        height: 3350.5px;
        margin-top: 1820px;
        margin-left: 80px;
        background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/title-1.png) center top no-repeat;
        overflow: hidden;
        .table-content{
          margin-top: 150px;
        }
        .table-content th {
          text-align: center;
          padding: 0;
          font-family: 'microsoft yahei', serif;
          font-size: 16px;
          color: #d6a245;
          font-weight: normal;
          border-bottom: 1px solid #51483e;
        }

        .table-content th.netbar {
          width: 353px;
          height: 44px;
          border-left: 1px solid #51483e;

        }

        .table-content td {
          text-align: center;
          padding: 0;
          font-size: 16px;
          color: #e9e9e9;
          font-family: 'microsoft yahei', serif;
          border-right: 1px solid #51483e;
          border-bottom: 1px solid #51483e;
        }

        .table-content td em {
          color: #d6a245;
        }

        .table-content tr {
          background: #2a2622;
        }

        .table-content .table-first {
          border-right: 1px solid #51483e;
          border-left: none;
        }

        .table-content .table-first:last-child {
          border-bottom: none;
        }

        .table-content tbody tr {
          height: 70px;
          border: none;
        }

        .table-content tbody tr:last-child {
          border-bottom: none;
        }

        .title-block {
          width: 35px;
          margin: 0 auto;
        }

        .table-content tr.table-light {
          background: #423b33;
          height: 85px;
        }

        .table-container {
          margin-top: 70px;
          padding: 2px;
          border: 1px solid #51483e;
        }

        .table-first {
          width: 110px;
        }

        .title-desc {
          width: 177px;
          text-align: left;
          text-align: center;
        }

        .table-content-text {
          width: 300px;
          text-align: left;
          margin: 0 auto;
        }

        tbody tr {
          border-bottom: 1px solid #51483e;
          box-sizing: border-box;
        }
        thead tr th:first-child {
          border-right: 1px solid #51483e;
        }
        .rank-title{
          width: 1000px;
          height: 75px;
          background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/title-2.png) no-repeat;
         margin-left: 200px;
         margin-top: 350px;
        }
        .guide{
          width: 1000px;
          height: 1541px;
          background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/step.png) left 8px top 10px no-repeat;
          .sub-setction{
            width: 1000px;
            height: 582px;
            margin-top: 65px;
            margin-left: 50px;
            h5{
              width: 833px;
              height: 45px;
              font-size: 30px;
              font-weight: normal;
              color: #d4d3d3;
              margin-left: 120px;
            }
            p{
              width: 833px;
              height: 24px;
              font-size: 16px;
              color: #a1917d;
              margin-top: 20px;
              margin-left: 120px;
            }
            img{
              width: 825px;
              height: 378px;
              margin-left: 120px;
              margin-top: 50px;
            }
          }
          .sub-setction1{
            width: 1000px;
            height: 582px;
            margin-top: 65px;
            margin-left: 50px;
            h5{
              width: 833px;
              height: 45px;
              font-size: 30px;
              font-weight: normal;
              color: #d4d3d3;
              margin-left: 120px;
            }
            p{
              width: 833px;
              height: 24px;
              font-size: 16px;
              color: #a1917d;
              margin-top: 20px;
              margin-left: 120px;
            }
            .btn{
              width: 408px;
              height: 70px;
              background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/spritesheet.png)  no-repeat;
              font-size: 30px;
              color: #3a2406;
              text-align: center;
              line-height: 80px;
              margin-top: 50px;
              margin-left: 250px;
            }
          }
        }
        .sectionbtn{
          width: 1000px;
          height: 84px;
          border: 1px solid yello;
          position: absolute;
          z-index: 9999;
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: -150px;
          .btn1{
            width: 414px;
            height: 84px;
            background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/spritesheet.png)  no-repeat;
            font-size: 30px;
            color: #3a2406;
            text-align: center;
            line-height: 90px;
          }
          .btn2{
            width: 414px;
            height: 84px;
            background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/desc/spritesheet.png)  no-repeat;
            font-size: 30px;
            color: #3a2406;
            text-align: center;
            line-height: 90px;
          }
        }
        .rules{
          width: 1000px;
          height: 245px;
          h1{
            width: 980px;
            height: 45px;
            font-size: 30px;
            color: #d4d3d3;
          }
          .rules-list{
            width: 980px;
            height: 170px;
            p{
              width: 980px;
              height: 34px;
              font-size: 14px;
              color: #9d9d9d;
              margin-top: 0px;
              margin-left: 15px;
              position: relative;
              padding: 15px;
              span{
                width: 24px;
                height: 24px;
                background: url(http://game.gtimg.cn/images/user/act/a20180107pubgNetbarPreOrder/list-point.png) no-repeat;
                display: block;
                color: #161616;
                text-align: center;
                position: absolute;
                margin-top: -2px;
                margin-left: -30px;
                padding: 2px 0px 2px 0px;
              }
              a{
                color: #e39600;
              }
            }
            
          }
        }
      }
    }
    .gfooter{
      width: 100%;
      height: 260px;
      background: #000;
      position: absolute;
      top: 5180px;
      .gfooter-left{
        width: 276px;
        height: 86px;
        margin-left: 450px;
        margin-top: 100px;
        .leftone{
          width: 180px;
          height: 35px;
        }
        .lefttwo{
          width: 66px;
          height: 56px;
        }
      }
      .gfooter-right{
        width: 829px;
        height: 130px;
        margin-left: 750px;
        margin-top: -150px;
        ul,
        li{
          font-size: 14px;
          color: #676767;
          list-style: none;
          margin: 5px;
          a{
            color: #676767;
            &:hover{
              text-decoration: underline;
            }
          }
        }
      }
    }
    .return{
      width: 70px;
      height: 70px;
      background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/gotop.png) no-repeat;
    }
  }
</style>
